<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>会员中心 | 美团网</title>
    <link rel="icon" href="imgs/favicon.ico" sizes="16x16 32x32" />
    <link rel="stylesheet" href="./css/normalize.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/member.css" />
 
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2766798_wyklb4ym1mp.css" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2791358_ts1lcocnu.css" />
    
    <script src="./js/jquery-1.8.3.min.js"></script>
  </head>
  <body>
    <!-- header -->
    <script src="./js/_common-locationChoose.js"></script>
    <header>
      <div class="bar">
        <div class="bar-content">
          <!-- city -->
          <div class="city">
            <i class="iconfont icon-zuobiao"></i>
            <span class="choose-city">南京</span>
  
            <!-- 请手动选择 -->
            <div class="area">
              <div class="change-city">切换城市<b></b></div>
              <div class="box">
                <ul class="tab">
                  <li class="cur">请选择</li>
                  <li class="">请选择</li>
                  <li class="">请选择</li>
                </ul>
                <div class="tab-content">
                  <div class="city" area-id="1"><a href="javascript:;">北京</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京1</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京2</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京3</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京</a><span title="选择">-</span></div>
                </div>
                <div class="tab-content" style="display: none;">
                  <div class="city" area-id="1"><a href="javascript:;">北京</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京4</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京5</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京6</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京</a><span title="选择">-</span></div>
                </div>
                <div class="tab-content" style="display: none;">
                  <div class="city" area-id="1"><a href="javascript:;">北京7</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京8</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京9</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京</a><span title="选择">-</span></div>
                  <div class="city" area-id="1"><a href="javascript:;">北京</a><span title="选择">-</span></div>
                </div>
              </div>
            </div>
            <!-- 请手动选择 -->
          </div>
          <!-- city -->
  
          <!-- login -->
          <div class="login">
              <!-- 已登录 -->
              <!-- <a href="./member.html">用户名</a>
              <a href="./logout.html">退出</a> -->
              <!-- 已登录 -->
  
              <!-- 未登录 -->
              <a href="./login.html">你好，请登录</a>
              <a href="./registry.html">免费注册</a>
              <a href="./order.html">我的订单</a>
              <!-- 未登录  -->
          </div>
          <!-- login -->
        </div>
      </div>
      <div class="content">
        <a href="./index.html"><img src="./imgs/logo.png" alt="" class="logo"></a>
        <div class="search">
          <input class="header-search-input" type="text" placeholder="搜索商家或地点">
          <button class="header-search-btn"><span
              class="header-icon icon-search-new iconfont icon-search"></span></button>
        </div>
        <div></div>
      </div>
    </header>
    <!-- header -->

    <!-- main -->
    <div class="page index" data-reactroot="">
      <div class="userexinfo-container">
        <div class="clearfix">
          <!-- 会员中心菜单 -->
          <script src="./js/member-menu.js"></script>
          <!-- 会员中心菜单 -->
          <div class="userinfo-box">
            <div class="my-page">
              <div class="user-info-box">
                <div class="user-info">
                  <div class="head-img">
                    <img src="./imgs/webopenfather.jpg" alt="" />
                  </div>
                  <div class="nick-name">
                    <a href="./vip.html"
                      ><p class="nick-name-txt">
                        神龙教主<i
                          class="levelIconNew iconfont_level icon-new-level_4"
                        ></i>
                        <img
                          src="./imgs/vip.png"
                          alt=""
                          class="vip"
                        /></p
                    ></a>
                    <p class="user-money">
                      我的余额：￥<span>0</span>
                      ·
                      <a href="./money.html">充值锋迷币</a>
                    </p>
                  </div>
                </div>
              </div>
              <div class="recommend-list clearfix">
                <div class="list-head">
                  <p>个人信息设置 <b>学it认准前端扛把子</b></p>
                </div>
                <!-- 内容 -->
                <div class="">
                  <div class="clearfix">
                    <div class="setting-content">
                      <div class="item clearfix">
                        <div class="field-name"><span>头像</span></div>
                        <div class="field-value">
                          <img
                            src="./imgs/webopenfather.jpg"
                            alt=""
                            class="head-img"
                          />
                        </div>
                        <div class="upload-container">
                          <div class="btn-upload">
                            <button class="btn-change">修改</button>
                          </div>
                        </div>
                      </div>
                      <div class="item clearfix">
                        <div class="field-name"><span>昵称</span></div>
                        <div class="field-value">
                          <span class="value">神龙教主</span>
                        </div>
                        <button class="btn-change change-nickname">修改</button>
                      </div>
                      <div class="item clearfix">
                        <div class="field-name"><span>换绑手机</span></div>
                        <div class="field-value">
                          <span class="value">150****9079</span>
                        </div>
                        <a
                          class="btn-change"
                          style="width: 80px"
                          href="javascript:;"
                          >换绑</a
                        >
                      </div>
                      <div class="item clearfix">
                        <div class="field-name"><span>登录密码</span></div>
                        <div class="field-value">
                          <span class="value">****</span>
                        </div>
                        <button class="btn-change change-pwd">修改</button>
                      </div>
                    </div>
                    <div class="dialogs">
                      <div class="dialog-container fadeOut">
                        <div class="dialog-box">
                          <div class="dialog-head clearfix">
                            <p class="dialog-name">修改头像</p>
                            <p class="dialog-close">
                              <img src="./imgs/close.png" alt="" />
                            </p>
                          </div>
                          <div class="dialog-body">
                            <div class="preview"></div>
                            <input
                              style="opacity: 0"
                              type="file"
                              accept="image/*"
                              name=""
                              id="upload"
                            />
                          </div>
                          <div class="btn-group">
                            <button class="btn btn-ok uploadBtn">
                              确认修改</button
                            ><button class="btn btn-cancel">取消</button>
                          </div>
                        </div>
                      </div>
                      <div class="dialog-container fadeOut">
                        <div class="dialog-box">
                          <div class="dialog-head clearfix">
                            <p class="dialog-name">修改昵称</p>
                            <p class="dialog-close">
                              <img src="./imgs/close.png" alt="" />
                            </p>
                          </div>
                          <div class="dialog-body">
                            <div class="row">
                              <label class="field-name">当前账号</label
                              ><span class="field-value">webopenfather</span>
                            </div>
                            <div class="row">
                              <label class="field-name">新账号</label>
                              <div class="field-input input-normal">
                                <input type="text" /><img
                                  src="./imgs/fail-ico.png"
                                  class="icon icon-fail"
                                  alt=""
                                /><img
                                  src="./imgs/succ-ico.png"
                                  class="icon icon-success"
                                  alt=""
                                />
                                <p class="error-msg"></p>
                                <p class="tip-msg">
                                  以中文或英文字母开头，限4-16个字符，一个汉字为两个字符
                                </p>
                              </div>
                            </div>
                          </div>
                          <div class="btn-group">
                            <button class="btn btn-ok">确认修改</button
                            ><button class="btn btn-cancel">取消</button>
                          </div>
                        </div>
                      </div>
                      <div class="dialog-container fadeOut">
                        <div class="dialog-box">
                          <div class="dialog-head clearfix">
                            <p class="dialog-name">修改手机号</p>
                            <p class="dialog-close">
                              <img src="./imgs/close.png" alt="" />
                            </p>
                          </div>
                          <div class="dialog-body">
                            <div class="row">
                              <label class="field-name">当前账号</label
                              ><span class="field-value">15021459079</span>
                            </div>
                            <div class="row">
                              <label class="field-name">新手机号</label>
                              <div class="field-input input-normal">
                                <input type="text" />
                              </div>
                            </div>
                            <div class="row">
                              <label class="field-name">验证码</label>
                              <div
                                class="field-input input-normal"
                                style="position: relative"
                              >
                                <input type="text" /><img
                                  src="./imgs/fail-ico.png"
                                  class="icon icon-fail"
                                  alt=""
                                /><img
                                  src="./imgs/succ-ico.png"
                                  class="icon icon-success"
                                  alt=""
                                />
                                <button class="smsbtn">获取验证码</button>
                                <p class="error-msg"></p>
                                <p class="tip-msg"></p>
                              </div>
                            </div>
                          </div>
                          <div class="btn-group">
                            <button class="btn btn-ok">确认修改</button
                            ><button class="btn btn-cancel">取消</button>
                          </div>
                        </div>
                      </div>
                      <div class="dialog-container fadeOut">
                        <div class="dialog-box">
                          <div class="dialog-head clearfix">
                            <p class="dialog-name">设置密码</p>
                            <p class="dialog-close">
                              <img src="./imgs/close.png" alt="" />
                            </p>
                          </div>
                          <div class="dialog-body">
                            <div class="row">
                              <label class="field-name">当前密码</label>
                              <div class="field-input input-normal">
                                <input type="password" /><img
                                  src="./imgs/fail-ico.png"
                                  class="icon icon-fail"
                                  alt=""
                                /><img
                                  src="./imgs/succ-ico.png"
                                  class="icon icon-success"
                                  alt=""
                                />
                                <p class="error-msg"></p>
                              </div>
                            </div>
                            <div class="row clearfix">
                              <label class="field-name">新密码</label>
                              <div class="field-input input-normal">
                                <input
                                  type="password"
                                  class="newpassword"
                                /><img
                                  src="./imgs/fail-ico.png"
                                  class="icon icon-fail"
                                  alt=""
                                /><img
                                  src="./imgs/succ-ico.png"
                                  class="icon icon-success"
                                  alt=""
                                />
                              </div>
                              <div class="pwd-level clearfix">
                                <div class="level">弱</div>
                                <div class="level">中</div>
                                <div class="level">强</div>
                              </div>
                              <div
                                class="field-input input-normal"
                                style="float: right; margin-right: 106px"
                              >
                                <p class="error-msg"></p>
                              </div>
                            </div>
                            <div class="row">
                              <label class="field-name">确认密码</label>
                              <div class="field-input input-normal">
                                <input type="password" /><img
                                  src="./imgs/fail-ico.png"
                                  class="icon icon-fail"
                                  alt=""
                                /><img
                                  src="./imgs/succ-ico.png"
                                  class="icon icon-success"
                                  alt=""
                                />
                                <p class="error-msg"></p>
                              </div>
                            </div>
                          </div>
                          <div class="btn-group">
                            <button class="btn btn-ok">确认修改</button
                            ><button class="btn btn-cancel">取消</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!--  内容  -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- main -->

    <script src="./js/member.js"></script>
  </body>
</html>
